<template>
  <div class="header">
  	<div class="navTop">
  		<div class="navTop_container">
  			<p class="navTop-left">客服热线400-0366-886</p>
  			<ul class="navTop-right">
  				<li><a href="" title="">您好，请登录</a></li>
  				<li><a href="" title="">免费注册</a></li>
  				<li>|</li>
  				<li>
  					<a href="" title="">
  						<span class="mobile"><img src="../assets/images/mobile.png" alt=""></span>手机投资
  					</a>
  				</li>
  			</ul>
  		</div>
  	</div>
  	<div class="nav">
  		<div class="navMain">
  			<div class="logo">
  				<img src="../assets/images/logo.png" alt="">
  			</div>
  			<ul class="navbar-nav">
  			    <li><a href="" title="">首页</a></li>
  			    <li><a href="" title="">网格产品</a></li>
  			    <li><a href="" title="">安全保障</a></li>
  			    <li><a href="" title="">关于我们</a></li>
  			    <li><a href="" title="">我的账户</a></li>
  			</ul>
  		</div>
  	</div>
  </div>
</template>

<script>
export default {
  name: 'about',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header{
	width: 100%;
	.navTop{
		width: 100%;
		height: 35px;
		display: -webkit-box;
		min-width: 1200px;
		background: #242424;
		.navTop_container{ 
			width: 1200px;
		    margin: 0 auto;
		    display: block;
		    position: relative;
		    .navTop-left{
		    	display: inline-block;
	    	    font-size: 14px;
	    	    color: #ccc;
	    	    float: left;
	    	    line-height: 35px;
		    }
		    .navTop-right{
		    	display: inline-block;
	    	    float: right;
	    	    li{
	    	    	float: left;
    	    	    margin-left: 30px;
    	    	    line-height: 35px;
    	    	    font-size: 14px;
    	    	    color: #ccc;
    	    	    a{
    	    	    	display: inline-block;
    	    	    	color: #ccc;
    	    	    	span{
    	    	    		margin-right: 5px;
    	    	    		display: inline-block;
    	    	    		height: 20px;
    	    	    		margin-top: 5px;
    	    	    		float: left;
    	    	    		img{
    	    	    			height: 20px;
    	    	    		}
    	    	    	}
    	    	    }
	    	    }
		    }
		}
	}
	.nav{
		width: 100%;
		min-width: 1200px;
		background: #fff;
		.navMain{
			width: 1200px;
			margin: auto;
			overflow: hidden;
			.logo{
				float: left;
			}
			.navbar-nav{
				float: right;
				overflow: hidden;
				li{
					float: left;
				}
			}
		}
	}
	
}


</style>
